<template>
	<view class='material-box' @touchmove.stop="stopTouch">
		<view class='material-wrapper'>
			<view class='material-space'></view>
			<uni-search-bar class='material-search' @confirm="searchMaterial" :focus="true" v-model="searchValue" @blur="blurMaterial" @focus="focusMaterial" @input="inputMaterial"
				@cancel="cancelMaterial" @clear="clearMaterial">
			</uni-search-bar>
			<uni-section class='material-section' type="line" title="已选食材" titleFontSize="14px">
				<scroll-view @touch.stop class='material-selected-list' :scroll-x="true" :scroll-y="false" :style="{width: setting.windowWidth * 3/4 + 'px'}">
					<view class='material-selected-item' v-for="(selectedMaterial, selectedMaterialIndex) in selectedMaterialList" :key="selectedMaterialIndex">
						<text class='cor-hb'>{{selectedMaterial.name}}</text>
						<view class='ico-close'><uni-icons type="closeempty" size="12" :color="setting.corhb"></uni-icons></view>
					</view>
				</scroll-view>
			</uni-section>
			<scroll-view class='material-dict-list' :scroll-y="true" :scroll-x="false" :style='{height: listHeight + "px"}' >
				<uni-section class='material-section' :title="dictMaterial.name" type="line" titleFontSize="14px" v-for="(dictMaterial, dictMaterialIndex) in dictMaterialList" :key="dictMaterialIndex">
					<template v-slot:right>
						<view class='list-item-btn' @click="addPerson" data-useflag='1'>
							<uni-icons type="loop" size="20" :color="setting.corb"></uni-icons>
							<text class='ico-next'>下一页</text>
						</view>
					</template>
					<view class='material-dict-items'>
						<view class='material-dict-item' v-for="(dict, dictIndex) in dictMaterial.dictList" :key="dictIndex">{{dict.name}}</view>
					</view>
				</uni-section>
				<view style="height: 40px;clear:both"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import gui from '@/lib/gui.js';
	import audio from '@/lib/audio.js';
	
	export default {
		data() {
			return {
				listHeight: 300,
				setting: {},
				searchValue: '',
				dictMaterialList: [
					{id: 1, name: '谷类及制品', 
						dictList:[
							{id:1, name:'小麦'},
							{id:1, name:'通心面'},
							{id:1, name:'空锅饼'},
							{id:1, name:'油条'},
							{id:1, name:'黑米'},
							{id:1, name:'粳糯米'},
							{id:1, name:'玉米（鲜）'},
							{id:1, name:'大麦'},
							{id:1, name:'青棵'},
							{id:1, name:'小米'}
						]},
					{id: 2, name: '薯类、淀粉及制品',
						dictList:[
							{id:1, name:'马铃薯'},
							{id:1, name:'木薯'},
							{id:1, name:'藕粉'},
							{id:1, name:'豆腐花'}
						]},
					{id: 3, name: '干豆及制品',
						dictList:[
							{id:1, name:'腐竹'},
							{id:1, name:'豆腐皮'},
							{id:1, name:'豆腐干'},
							{id:1, name:'绿豆面'},
							{id:1, name:'小豆粥'},
							{id:1, name:'红豆馅'},
							{id:1, name:'蚕豆'},
							{id:1, name:'眉豆'},
							{id:1, name:'豇豆'},
							{id:1, name:'鹰嘴豆'},
							{id:1, name:'红萝卜'},
							{id:1, name:'青萝卜'},
							{id:1, name:'黑豆苗'}
						]},
					{id: 4, name: '蔬菜及制品',
						dictList:[
							{id:1, name:'小麦'},
							{id:1, name:'通心面'},
							{id:1, name:'空锅饼'},
							{id:1, name:'油条'},
							{id:1, name:'黑米'},
							{id:1, name:'粳糯米'},
							{id:1, name:'玉米（鲜）'},
							{id:1, name:'大麦'},
							{id:1, name:'青棵'},
							{id:1, name:'小米'}
						]},
					{id: 5, name: '菌藻',
						dictList:[
							{id:1, name:'小麦'},
							{id:1, name:'通心面'},
							{id:1, name:'空锅饼'},
							{id:1, name:'油条'},
							{id:1, name:'黑米'},
							{id:1, name:'粳糯米'},
							{id:1, name:'玉米（鲜）'},
							{id:1, name:'大麦'},
							{id:1, name:'青棵'},
							{id:1, name:'小米'}
						]},
					{id: 6, name: '水果及制品',
						dictList:[
							{id:1, name:'小麦'},
							{id:1, name:'通心面'},
							{id:1, name:'空锅饼'},
							{id:1, name:'油条'},
							{id:1, name:'黑米'},
							{id:1, name:'粳糯米'},
							{id:1, name:'玉米（鲜）'},
							{id:1, name:'大麦'},
							{id:1, name:'青棵'},
							{id:1, name:'小米'}
						]},
					{id: 7, name: '坚果、种子',
						dictList:[
							{id:1, name:'小麦'},
							{id:1, name:'通心面'},
							{id:1, name:'空锅饼'},
							{id:1, name:'油条'},
							{id:1, name:'黑米'},
							{id:1, name:'粳糯米'},
							{id:1, name:'玉米（鲜）'},
							{id:1, name:'大麦'},
							{id:1, name:'青棵'},
							{id:1, name:'小米'}
						]},
					{id: 8, name: '油脂',
						dictList:[
							{id:1, name:'小麦'},
							{id:1, name:'通心面'},
							{id:1, name:'空锅饼'},
							{id:1, name:'油条'},
							{id:1, name:'黑米'},
							{id:1, name:'粳糯米'},
							{id:1, name:'玉米（鲜）'},
							{id:1, name:'大麦'},
							{id:1, name:'青棵'},
							{id:1, name:'小米'}
						]},
					{id: 9, name: '畜肉及制品',
						dictList:[
							{id:1, name:'小麦'},
							{id:1, name:'通心面'},
							{id:1, name:'空锅饼'},
							{id:1, name:'油条'},
							{id:1, name:'黑米'},
							{id:1, name:'粳糯米'},
							{id:1, name:'玉米（鲜）'},
							{id:1, name:'大麦'},
							{id:1, name:'青棵'},
							{id:1, name:'小米'}
						]},
					{id: 10, name: '禽肉及制品',
						dictList:[
							{id:1, name:'小麦'},
							{id:1, name:'通心面'},
							{id:1, name:'空锅饼'},
							{id:1, name:'油条'},
							{id:1, name:'黑米'},
							{id:1, name:'粳糯米'},
							{id:1, name:'玉米（鲜）'},
							{id:1, name:'大麦'},
							{id:1, name:'青棵'},
							{id:1, name:'小米'}
						]},
					{id: 11, name: '乳类及制品',
						dictList:[
							{id:1, name:'小麦'},
							{id:1, name:'通心面'},
							{id:1, name:'空锅饼'},
							{id:1, name:'油条'},
							{id:1, name:'黑米'},
							{id:1, name:'粳糯米'},
							{id:1, name:'玉米（鲜）'},
							{id:1, name:'大麦'},
							{id:1, name:'青棵'},
							{id:1, name:'小米'}
						]},
					{id: 12, name: '蛋类及制品',
						dictList:[
							{id:1, name:'小麦'},
							{id:1, name:'通心面'},
							{id:1, name:'空锅饼'},
							{id:1, name:'油条'},
							{id:1, name:'黑米'},
							{id:1, name:'粳糯米'},
							{id:1, name:'玉米（鲜）'},
							{id:1, name:'大麦'},
							{id:1, name:'青棵'},
							{id:1, name:'小米'}
						]},
					{id: 13, name: '鱼虾蟹贝',
						dictList:[
							{id:1, name:'小麦'},
							{id:1, name:'通心面'},
							{id:1, name:'空锅饼'},
							{id:1, name:'油条'},
							{id:1, name:'黑米'},
							{id:1, name:'粳糯米'},
							{id:1, name:'玉米（鲜）'},
							{id:1, name:'大麦'},
							{id:1, name:'青棵'},
							{id:1, name:'小米'}
						]},
					{id: 14, name: '其他',
						dictList:[
							{id:1, name:'小麦'},
							{id:1, name:'通心面'},
							{id:1, name:'空锅饼'},
							{id:1, name:'油条'},
							{id:1, name:'黑米'},
							{id:1, name:'粳糯米'},
							{id:1, name:'玉米（鲜）'},
							{id:1, name:'大麦'},
							{id:1, name:'青棵'},
							{id:1, name:'小米'}
						]},
				],
				selectedMaterialList: [
					{id: 1, name: '苹果'},
					{id: 2, name: '馒头'},
					{id: 3, name: '咸菜'},
					{id: 4, name: '胡萝卜'},
					{id: 5, name: '牛肉'},
					{id: 1, name: '苹果'},
					{id: 2, name: '馒头'},
					{id: 3, name: '咸菜'},
					{id: 4, name: '胡萝卜'},
					{id: 5, name: '牛肉'}
				],
			}
		},
		onReady(){
			
		},
		mounted(){
			console.log('material onShow start');
			gui.init(this);
			this.flushMaterialBox();
		},
		methods: {
			flushMaterialBox(){
				this.listHeight = this.setting.windowHeight - 40 - 56 - 50;
				console.log('this.listHeight = ' + this.listHeight);
			},
			
			stopTouch(){
			},
			
			scrollList(e){
				console.log(e);
			},
			
			searchMaterial(e){
				
			},
			blurMaterial(e){
				
			},
			focusMaterial(e){
				
			},
			inputMaterial(e){
				
			},
			cancelMaterial(e){
				
			},
			clearMaterial(e){
				
			}
		}
	}
</script>

<style>
	.material-space{
		height: 40px;
		clear: both;
	}
	
	.material-box{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.material-wrapper{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.material-selected-list{
		width: 100%;
		position: relative;
		border-bottom: 1px solid #f1f1f1;
		height: 60px;
		white-space: nowrap;
		overflow-x: scroll;
		overflow-y: hidden;
	}
	
	.material-selected-item{
		display: inline-block;
		padding: 4px 12px;
		background-color: #f1f1f1;
		color: #ccc;
		border-radius: 6px;
		margin: 20px 5px 8px 5px;
		position: relative;
		font-size: 12px;
	}
	
	.ico-close{
		position: absolute;
		right: -12px;
		top: -20px;
		padding: 5px;
	}
	
	.material-dict-list{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.material-section{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.material-dict-items{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		padding: 0px 8px;
	}
	
	.material-dict-item{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		padding: 5px 10px;
		background-color: #f1f1f1;
		margin: 5px 5px 5px 0px;
		border-radius: 5px;
	}
	
	.list-item-btn{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}
	
	.ico-next{
		padding-left: 2px;
		color: #33b4ff;
		font-size: 12px;
	}
</style>
